<template lang="html">
  <div class="commonModule">
    <el-row>

      <el-col :xs="24" :sm="{span:16,offset:0}" :md="{span:6,offset:11}" :lg="{span:6,offset:11}" class="commonModule-box">
        <el-col :xs="24" :sm="{span:22,offset:0}" :md="{span:22,offset:0}" :lg="{span:22,offset:0}" class="model-view">
          <el-tabs  v-model="activeName"  @tab-click="handleClick">
              <el-tab-pane label="登录" name="login">
                <router-view></router-view>
                <!-- <loginModule></loginModule> -->

              </el-tab-pane>
              <el-tab-pane label="注册" name="register">
                <router-view></router-view>

                <!-- <registerModel></registerModel> -->
                <!-- <router-view class="view-register" name="registerview"></router-view> -->
              </el-tab-pane>
          </el-tabs>
        </el-col>


      </el-col>

    </el-row>

  </div>
</template>

<script>
// import loginModule from '../../login/loginModule.vue'
// import registerModel from '../../register/registerModel.vue'
export default {


    data() {

        return {
            activeName: 'login'
        }

    },
    // props: ['activename'],
    components: {
        // loginModule,
        // registerModel
    },
    methods: {
        handleClick(tab, event) {
            if (tab.name == 'login') {
                this.activename = 'login'
                this.$router.push('/home/login')
            } else if (tab.name == 'register') {
                this.activename = 'register'
                this.$router.push('/home/register')
            }
            console.log(tab, event);
        },

    },
    computed: {
        funa: () => {
            console.log(this.$router.name);
        }
    }
}
</script>

<style lang="css">
.commonModule{
}
.model-view{
  border: 1px solid #aaa;
  margin-top:  180px;

  border-radius: 2px;
  box-shadow: 0px 5px 10px 4px rgba(36, 36, 36,0.5);
}
.commonModule-box{
  height: 900px;
  background-color: #fff;
}
</style>
